<script>
export default {
  name: "Organization",
  data() {
    return {
      tab: 'first',
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }],
    }
  }
}
</script>

<template>
  <div class="report">
    <div class="card">
      <el-tabs v-model="tab">
        <el-tab-pane label="全行总计" name="first">
          <div class="title">正式员工</div>
          <div class="layout">
            <div class="item">
              <div class="dot" style="background: #1890ff"></div>
              <div class="label">在岗</div>
              <div class="value" style="color: #1890ff">1832</div>
            </div>
            <div class="item">
              <div class="dot" style="background: #13c2c2"></div>
              <div class="label">待岗</div>
              <div class="value" style="color: #13c2c2">1832</div>
            </div>
            <div class="item">
              <div class="dot" style="background: #faad14"></div>
              <div class="label">外派助业</div>
              <div class="value" style="color: #faad14">1832</div>
            </div>
            <div class="item">
              <div class="dot" style="background: #cf3b26"></div>
              <div class="label">内退</div>
              <div class="value" style="color: #cf3b26">1832</div>
            </div>
            <div class="item">
              <img style="position: absolute;left: 15px;top: 8px" alt="" src="../images/icon1.svg">
              <div class="summary">
                小计：{{ 2782 }}
              </div>
            </div>
          </div>
          <div class="layout">
            <div>
              <div class="title">劳务派遣</div>
              <div class="item" style="margin-top: 16px">
                <div class="value" style="color: #13c2c2">832</div>
              </div>
            </div>
            <div>
              <div class="title">外包人员</div>
              <div class="item" style="margin-top: 16px">
                <div class="value" style="color: #faad14">832</div>
              </div>
            </div>
            <div class="two-fifth">
              <div class="title" style="visibility: hidden">hidden</div>
              <div class="item" style="margin-top: 16px">
                <div class="summary" style="color: #ffffff">
                  总计: {{ 4782 }}
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="总行" name="second">
          <div class="title">正式员工</div>
          <div class="layout">
            <div class="item">
              <div class="dot" style="background: #1890ff"></div>
              <div class="label">在岗</div>
              <div class="value" style="color: #1890ff">1832</div>
            </div>
            <div class="item">
              <div class="dot" style="background: #13c2c2"></div>
              <div class="label">待岗</div>
              <div class="value" style="color: #13c2c2">1832</div>
            </div>
            <div class="item">
              <div class="dot" style="background: #faad14"></div>
              <div class="label">外派助业</div>
              <div class="value" style="color: #faad14">1832</div>
            </div>
            <div class="item">
              <div class="dot" style="background: #cf3b26"></div>
              <div class="label">内退</div>
              <div class="value" style="color: #cf3b26">1832</div>
            </div>
            <div class="item">
              <img style="position: absolute;left: 15px;top: 8px" alt="" src="../images/icon1.svg">
              <div class="summary">
                小计：{{ 2782 }}
              </div>
            </div>
          </div>
          <div class="layout">
            <div>
              <div class="title">劳务派遣</div>
              <div class="item" style="margin-top: 16px">
                <div class="value" style="color: #13c2c2">832</div>
              </div>
            </div>
            <div>
              <div class="title">外包人员</div>
              <div class="item" style="margin-top: 16px">
                <div class="value" style="color: #faad14">832</div>
              </div>
            </div>
            <div class="two-fifth">
              <div class="title" style="visibility: hidden">hidden</div>
              <div class="item" style="margin-top: 16px">
                <div class="summary" style="color: #ffffff">
                  总计: {{ 4782 }}
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="分行" name="third">
          <div class="title">正式员工</div>
          <div class="layout">
            <div class="item">
              <div class="dot" style="background: #1890ff"></div>
              <div class="label">在岗</div>
              <div class="value" style="color: #1890ff">1832</div>
            </div>
            <div class="item">
              <div class="dot" style="background: #13c2c2"></div>
              <div class="label">待岗</div>
              <div class="value" style="color: #13c2c2">1832</div>
            </div>
            <div class="item">
              <div class="dot" style="background: #faad14"></div>
              <div class="label">外派助业</div>
              <div class="value" style="color: #faad14">1832</div>
            </div>
            <div class="item">
              <div class="dot" style="background: #cf3b26"></div>
              <div class="label">内退</div>
              <div class="value" style="color: #cf3b26">1832</div>
            </div>
            <div class="item">
              <img style="position: absolute;left: 15px;top: 8px" alt="" src="../images/icon1.svg">
              <div class="summary">
                小计：{{ 2782 }}
              </div>
            </div>
          </div>
          <div class="layout">
            <div>
              <div class="title">劳务派遣</div>
              <div class="item" style="margin-top: 16px">
                <div class="value" style="color: #13c2c2">832</div>
              </div>
            </div>
            <div>
              <div class="title">外包人员</div>
              <div class="item" style="margin-top: 16px">
                <div class="value" style="color: #faad14">832</div>
              </div>
            </div>
            <div class="two-fifth">
              <div class="title" style="visibility: hidden">hidden</div>
              <div class="item" style="margin-top: 16px">
                <div class="summary" style="color: #ffffff">
                  总计: {{ 4782 }}
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="card" style="margin-top: 16px">
      <div style="text-align: right">
        <div class="download">下载<i class="el-icon-download"></i></div>
      </div>
      <el-table :data="tableData" style="width: 100%;margin-top: 16px"
                :header-cell-style="{background: '#fcf8f8', color: '#716767'}">
        <el-table-column prop="date" label="机构分布" align="center"></el-table-column>
        <el-table-column label="正式员工" align="center">
          <el-table-column prop="province" label="在岗" align="center"></el-table-column>
          <el-table-column prop="city" label="待岗" align="center"></el-table-column>
          <el-table-column prop="address" label="外派助业" align="center"></el-table-column>
          <el-table-column prop="zip" label="内退" align="center"></el-table-column>
          <el-table-column prop="date" label="合计" align="center"></el-table-column>
        </el-table-column>
        <el-table-column prop="date" label="劳务派遣" align="center"></el-table-column>
        <el-table-column prop="date" label="外包人员" align="center"></el-table-column>
        <el-table-column prop="date" label="总计" align="center"></el-table-column>
        <el-table-column label="其中：正式在岗员工变动情况" align="center">
          <el-table-column prop="province" label="上月" align="center"></el-table-column>
          <el-table-column prop="city" label="比上月" align="center"></el-table-column>
          <el-table-column prop="address" label="减少" align="center"></el-table-column>
          <el-table-column prop="zip" label="增加" align="center"></el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <el-backtop target=".report"></el-backtop>
  </div>
</template>

<style scoped lang="less">
.report {
  width: 100%;
  height: 100%;
  padding: 16px;
  background: #f3f3f3;
  overflow-y: auto;

  .download {
    color: #cf3b73;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;

    i {
      margin-left: 4px;
      font-size: 16px;
    }
  }

  .title {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    color: #26292f;
    padding-left: 12px;
    position: relative;
    user-select: none;

    &:before {
      content: '';
      width: 4px;
      height: 100%;
      background: #cf3b26;
      position: absolute;
      left: 0;
      top: 0;
    }

    .text {
      flex: 1;
    }
  }

  .card {
    background: #ffffff;
    border-radius: 6px;
    padding: 16px;
  }

  .layout {
    margin-top: 16px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 16px;

    .item {
      border: 1px solid #d7d7d7;
      background: #fffdfd;
      padding: 0 24px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      height: 80px;
      position: relative;

      .dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
      }

      .label {
        margin-left: 8px;
        font-size: 16px;
        flex: 1;
      }

      .value {
        font-size: 30px;
        font-weight: 600;
      }

      .summary {
        flex: 1;
        text-align: center;
        font-weight: 600;
        font-size: 28px;
        color: #cf3b26;
      }
    }

    .two-fifth {
      grid-column: 4 / 6;

      .item {
        background: linear-gradient(90.75950900057735deg, rgba(228, 74, 74, 1) 1%, rgba(251, 144, 101, 1) 100%);
      }
    }
  }
}
</style>